<template>
	<view class="container">
		<button @click="toggleStream">{{ streaming ? '停止监听' : '开始报名' }}</button>
		<view class="status-box">
			<text>当前状态：{{ statusText }}</text>

			<text v-if="gameId">游戏ID：{{ gameId }}</text>

			<text>当前状态：{{ buffer }}</text>
		</view>
	</view>
</template>

<script>
	// 测试用 基础+处理数据包
	// 流式接口地址
	const reqUrl = "http://192.168.1.30:9000"
	const STREAM_API = reqUrl + '/api/TakePhoto/tpcreate?openid=12151515'

	export default {
		data() {
			return {
				streaming: false,
				statusText: '等待连接',
				gameId: null,
				controller: null,
				buffer: '' // 数据缓冲区
			}
		},
		methods: {
			async toggleStream() {
				if (this.streaming) {
					this.stopStream()
				} else {
					await this.startStream()
				}
			},

			async startStream() {
				try {
					this.initState()
					this.controller = new AbortController()

					const response = await fetch(STREAM_API, {
						method: 'GET',
						headers: {
							'Content-Type': 'application/json'
						},
						// body: JSON.stringify({ /* 你的请求参数 */ }),
						signal: this.controller.signal
					})

					await this.processStream(response)
				} catch (error) {
					this.handleError(error)
				}
			},

			// 初始化状态
			initState() {
				this.streaming = true
				this.statusText = '连接服务中...'
				this.gameId = null
				this.buffer = ''
			},

			// 处理数据流
			async processStream(response) {
				if (!response.ok) throw new Error(`HTTP错误 ${response.status}`)
				if (!response.body) throw new Error('无响应内容')

				const reader = response.body.getReader()
				const decoder = new TextDecoder('utf-8')

				while (this.streaming) {
					const {
						done,
						value
					} = await reader.read()
					if (done) break

					// 处理数据块
					this.buffer += decoder.decode(value, {
						stream: true
					})
					console.log(this.buffer);

					// // 微信环境下需要强制更新视图
					// this.$forceUpdate()

					this.processBuffer()
				}
			},

			// 处理缓冲区数据
			processBuffer() {
				while (true) {
					// 定位数据块起始和结束位置
					const startIdx = this.buffer.indexOf('[DONE]')
					const endIdx = this.buffer.indexOf('[END]')

					// 需要至少找到一个完整数据块
					if (startIdx === -1 || endIdx === -1 || endIdx < startIdx) return

					// 提取有效数据部分
					const chunk = this.buffer.slice(
						startIdx + 6, // '[DONE]' 长度6
						endIdx
					)

					// 更新缓冲区（保留未处理部分）
					this.buffer = this.buffer.slice(endIdx + 5) // '[END]' 长度5

					// 解析数据
					const params = this.parseChunk(chunk)
					this.handleParams(params)
				}
			},

			// 解析数据块
			parseChunk(chunk) {
				const params = new URLSearchParams(chunk)
				return {
					code: parseInt(params.get('code')),
					msg: params.get('msg'),
					gameId: params.get('GameID')
				}
			},

			// 处理解析后的参数
			handleParams({
				code,
				msg,
				gameId
			}) {
				switch (code) {
					case 201:
						this.statusText = `✅ ${msg}`
						this.gameId = gameId
						break
					case 40005:
						this.statusText = `❌ ${msg}`
						this.stopStream()
						break
					default:
						this.statusText = `⚠️ 未知状态码: ${code}`
				}

				// 微信环境下需要强制更新视图
				this.$forceUpdate()
			},

			// 停止流式传输
			stopStream() {
				if (this.controller) {
					this.controller.abort()
					this.controller = null
				}
				this.streaming = false
				this.buffer = ''
			},

			// 错误处理
			handleError(error) {
				if (error.name === 'AbortError') {
					this.statusText = '⏹ 已手动停止'
				} else {
					console.error('请求失败:', error)
					this.statusText = `❌ 错误: ${error.message}`
				}
				this.$forceUpdate()
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
	}

	button {
		background-color: #07c160;
		color: white;
		padding: 15px 30px;
		border-radius: 25px;
		font-size: 16px;
	}

	.status-box {
		margin-top: 20px;
		padding: 15px;
		background-color: #f7f7f7;
		border-radius: 10px;
	}

	.status-box text {
		display: block;
		margin: 8px 0;
		font-size: 14px;
		color: #333;
	}
</style>